<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>UI</title>
    <link href="demo.css" rel="stylesheet">
    <script src="jquery.js"></script>

    <link href="dist/css/H.min.css" rel="stylesheet" type="text/css">
    <script src="dist/js/H.min.js"></script>

	<style>
        .demoHeaders {
            padding: 8px 0;
            margin-top: 10px;
        }
        #dialog-link {
            padding: .4em 1em .4em 20px;
            text-decoration: none;
            position: relative;
        }
        #dialog-link span.ui-icon {
            margin: 0 5px 0 0;
            position: absolute;
            left: .2em;
            top: 50%;
            margin-top: -8px;
        }
        #icons {
            margin: 0;
            padding: 0;
        }
        #icons li {
            margin: 2px;
            position: relative;
            padding: 4px 0;
            cursor: pointer;
            float: left;
            list-style: none;
        }
        #icons span.ui-icon {
            float: left;
            margin: 0 4px;
        }
        .fakewindowcontain .ui-widget-overlay {
            position: absolute;
        }
        select {
            width: 200px;
        }
        /* 普通 和 small 文本框的宽度会被 padding 撑大 16px，所以如果要设置 200 宽的文本框，应该是 200-16=184。 */
        input[type=text] {
            width: 184px;
        }
        /* large 文本框的宽度会被 padding 撑大 18px，所以如果要设置 200 宽的文本框，应该是 200-18=182。 */
        input[type=text].ui-text-large {
            width: 182px;
        }
        /* 文本域的使用原理和文本框一样 */
        textarea{
            width: 584px;
            height: 80px;
        }
        .tooltips-demo{
            width: 100%;
            position: relative;
            height: 250px;
        }
        .tooltips-demo .demo-1{
            left: 0;
        }
        .tooltips-demo .demo-2{
            left: 200px;
        }
        .tooltips-demo .demo-3{
            left: 400px;
        }
        .tooltips-demo .demo-4{
            left: 600px;
        }
        .tooltips-demo .demo-5{
            top: 120px;
            left: 0;
        }
        .tooltips-demo .demo-6{
            top: 120px;
            left: 400px;
        }
        .tooltips-demo .demo-7{
            top: 180px;
            left: 0;
        }
        .tooltips-demo .demo-8{
            top: 180px;
            left: 400px;
        }
        .ui-tooltips .ui-icon {
            position: absolute;
            margin-top: 1px;
            margin-left: -20px;
        }
        .table{
            width: 800px;
            border-collapse: collapse;
            border: 1px solid #e2e2e2;
            margin-bottom: 10px;
        }
        .table td {
            border: 1px solid #e2e2e2;
            padding: 10px;
            text-align: left;
            width: 50%;
        }
        .my-progress{
            width: 250px;
            height: 10px;
        }
	</style>
</head>
<body>
<div class="container">
    <h2>UI</h2>
    <ul>
        <li>使用方法请看源代码及注释</li>
    </ul>

    <div style="height: 50px"></div>
    <h2>Demo</h2>
    <p style="padding: 10px 0; line-height: 25px; font-size: 14px;">
        这套 UI 是集各家所长所诞生出来的产物。<br>
        <span style="color: #f00;">考虑到国内有【360】和【搜狗】等众多奇葩浏览器的所谓兼容模式<br>
        这套 UI 控件兼容了 <b style="font-size: 20px;">IE7</b>，但在使用上也变得比一般 UI 框架复杂些，不过效果绝对是杠杠的。</span><br>
        效果和便利性不能两全，我选择的是【效果】，SO...界面调整出现难题尽管找我吧。<br>
        <b style="color: #f00;">由于 IE7 不支持 box-sizing: border-box; 所以一旦使用了这套 UI，前端同学在调整尺寸时就要注意了</b><br>
        <br>
        这套 UI 的 输入框和下拉框做了 大、普通、小三个 size，按钮做了大、普通、小、迷你四个 size<br>
        设计的同学请尽可能依靠这几个尺寸<span style="color: #f00;">（特指高度，宽度调整比较简单）</span>满足设计需求<br>
        <b>大（高42px）、普通（高35px）、小（高28px）、迷你（高20px）</b><br>
        实在不行...再由前端重写尺寸吧...<br>
        理想的做法是重写尺寸将覆盖目标定在 .ui-btn 类，且尽量通过改写宽度一个属性来完成按钮大小调整<br><br>
    </p>

    <!-- ------------------------------- 华丽无双的分割线 ------------------------------- -->
    <h4 class="demoHeaders">Button</h4>
    <button class="ui-btn" type="button">普通按钮</button>&nbsp;<button class="ui-btn ui-btn-disabled" type="button" disabled>不可点击状态</button>

    <br><br>

    <a href="####" class="ui-btn">链接按钮</a>&nbsp;<input class="ui-btn" type="button" value="INPUT按钮" />

    <br><br>

    <button class="ui-btn ui-btn-large" type="button"><i class="icon icon-l">&#169;</i>左边有图标的按钮</button>&nbsp;
    <button class="ui-btn ui-btn-large" type="button">右边有图标的按钮<i class="icon icon-r">&#174;</i></button>
    <br><br>
    <button class="ui-btn" type="button"><i class="icon icon-l">&#169;</i>左边有图标的按钮</button>&nbsp;
    <button class="ui-btn" type="button">右边有图标的按钮<i class="icon icon-r">&#174;</i></button>
    <br><br>
    <button class="ui-btn ui-btn-small" type="button"><i class="icon icon-l">&#169;</i>左边有图标的按钮</button>&nbsp;
    <button class="ui-btn ui-btn-small" type="button">右边有图标的按钮<i class="icon icon-r">&#174;</i></button>
    <br><br>
    <button class="ui-btn ui-btn-mini" type="button"><i class="icon icon-l">&#169;</i>左边有图标的按钮</button>&nbsp;
    <button class="ui-btn ui-btn-mini" type="button">右边有图标的按钮<i class="icon icon-r">&#174;</i></button>

    <br><br>

    <button class="ui-btn ui-btn-large" type="button">大按钮</button>&nbsp;
    <button class="ui-btn" type="button">普通按钮</button>&nbsp;
    <button class="ui-btn ui-btn-small" type="button">小按钮</button>&nbsp;
    <button class="ui-btn ui-btn-mini" type="button">迷你按钮</button>&nbsp;

    <br><br>

    按钮的默认颜色是暗红色，UI 库在此基础上还提供了以下几种颜色的按钮：<br><br>
    <button class="ui-btn ui-btn-blue" type="button">蓝色按钮</button>&nbsp;
    <button class="ui-btn ui-btn-green" type="button">绿色按钮</button>&nbsp;
    <button class="ui-btn ui-btn-orange" type="button">橙色按钮</button>&nbsp;
    <button class="ui-btn ui-btn-violet" type="button">紫色按钮</button>&nbsp;

    <br><br>

    假如需要自定义新颜色的按钮，可以到 <b>public.less</b> 文件中获取 <b>.create-color-btn</b> 这个 <b>mixins</b> 来生成按钮<br>
    例如蓝色按钮就是这样生成的：<br>
    <b style="color: #f00;">.create-color-btn(blue, #ffffff, #4bb1cf, #4bb1cf);</b><br>
    生成出来的结果：<br>
    <b>.btn-blue { background: #4bb1cf; border: 1px solid #4bb1cf; color: #ffffff; }</b><br>
    <b>.btn-blue:hover { background: #53c3e4; border-color: #53c3e4; }</b><br>
    <b>.btn-blue:active { background: #449fba; border-color: #449fba; }</b><br>


    <!-- ------------------------------- 华丽无双的分割线 ------------------------------- -->
    <br><br>
    <h4 class="demoHeaders">Input</h4>
    文本框的宽度会被 padding 撑大 16px，所以如果要设置 200 宽的文本框，应该是 200-16=184。随着文本框的字体大小变化，这个值还会撑大值还会改变，需要根据实际调整<br>
    如果不想兼容 IE7 直接修改 H-ui.css 为文本输入框加上 box-sizing: border-box; 样式即可<br>
    为了兼容 IE7 ~ IE8，disabled 状态需要加上 .ui-text-disabled 类<br><br>
    <input type="text" />
    <br><br>
    <input class="ui-text-disabled" type="text" disabled value="132123" />
    <br><br>
    <input type="text" class="ui-text-large" />
    <br><br>
    <input type="text" class="ui-text-small" />
    <br><br>

    <div class="ui-text-icon ui-text-icon-l">
        <i class="icon fa fa-calendar"></i>
        <input type="text" />
    </div>

    <br><br>

    <div class="ui-text-icon ui-text-icon-l">
        <i class="icon fa fa-calendar"></i>
        <input type="text" class="ui-text-large" />
    </div>

    <br><br>

    <div class="ui-text-icon ui-text-icon-l">
        <i class="icon fa fa-calendar"></i>
        <input type="text" class="ui-text-small" />
    </div>

    <br><br>

    <div class="ui-text-icon ui-text-icon-r">
        <i class="icon fa fa-calendar"></i>
        <input type="text" />
    </div>

    <br><br>

    <div class="ui-text-icon ui-text-icon-r">
        <i class="icon fa fa-calendar"></i>
        <input type="text" class="ui-text-large" />
    </div>

    <br><br>

    <div class="ui-text-icon ui-text-icon-r">
        <i class="icon fa fa-calendar"></i>
        <input type="text" class="ui-text-small" />
    </div>


    <!-- ------------------------------- 华丽无双的分割线 ------------------------------- -->
    <br><br>
    <h4 class="demoHeaders">Textarea</h4>
    文本域的使用原理和文本框一样<br>
    为了兼容 IE7 ~ IE8，disabled 状态需要加上 .ui-text-disabled 类<br><br>
    <textarea>普通</textarea>
    <br><br>
    <textarea class="ui-text-disabled" disabled></textarea>
    <br><br>
    <textarea class="ui-text-large">大号（主要还是体现在字体大小上的区别）</textarea>
    <br><br>
    <textarea class="ui-text-small">小号（文本域的small 和 普通几乎没区别就是了）</textarea>

    <!-- ------------------------------- 华丽无双的分割线 ------------------------------- -->
    <br><br>
    <h4 class="demoHeaders">Selectmenu</h4>
    利用脚本修改下拉框的值后，利用refresh方法可以刷新模拟下拉框<br>
    $( "#J-selectmenu-a" ).val('Slow');<br>
    $( "#J-selectmenu-a" ).selectmenu('refresh');<br><br>
    <select id="J-selectmenu-a">
        <option>Slower</option>
        <option>Slow</option>
        <option selected="selected">Medium</option>
        <option>Fast</option>
        <option>Faster</option>
    </select>

    <br><br>

    <select id="J-selectmenu-b" disabled>
        <option>Slower</option>
        <option>Slow</option>
        <option>Medium</option>
        <option selected="selected">Fast</option>
        <option>Faster</option>
    </select>

    <br><br>

    <select id="J-selectmenu-c">
        <option>Slower</option>
        <option>Slow</option>
        <option>Medium</option>
        <option selected="selected">Fast</option>
        <option>Faster</option>
    </select>

    <br><br>

    <select id="J-selectmenu-d">
        <option>Slower</option>
        <option>Slow</option>
        <option>Medium</option>
        <option selected="selected">Fast</option>
        <option>Faster</option>
    </select>

    <!-- ------------------------------- 华丽无双的分割线 ------------------------------- -->
    <br><br>
    <h4 class="demoHeaders">Radio</h4>
    <span class="ui-radio"><input type="radio" id="item1" name="item1" class="ui-radio-normal"><label for="item1" class="ui-radio-simulation"></label></span>
    <label for="item1" class="ui-label">标签</label>
    <span class="ui-radio"><input type="radio" id="item3" name="item3" class="ui-radio-normal" checked=""><label for="item3" class="ui-radio-simulation"></label></span>
    <label for="item3" class="ui-label">标签</label>
    <span class="ui-radio"><input type="radio" id="item4" name="item4" class="ui-radio-normal" disabled=""><label for="item4" class="ui-radio-simulation"></label></span>
    <label for="item4" class="ui-label f-not-allowed">标签</label>
    <span class="ui-radio"><input type="radio" id="item5" name="item5" class="ui-radio-normal" disabled="" checked=""><label for="item5" class="ui-radio-simulation"></label></span>
    <label for="item5" class="ui-label f-not-allowed">标签</label>

    <!-- ------------------------------- 华丽无双的分割线 ------------------------------- -->
    <br><br>
    <h4 class="demoHeaders">Checkbox</h4>
    <span class="ui-checkbox"><input type="checkbox" id="item1-1" name="item1-1" class="ui-checkbox-normal"><label for="item1-1" class="ui-checkbox-simulation"></label></span>
    <label for="item1-1" class="ui-label">标签</label>
    <span class="ui-checkbox"><input type="checkbox" id="item3-1" name="item3-1" class="ui-checkbox-normal" checked=""><label for="item3-1" class="ui-checkbox-simulation"></label></span>
    <label for="item3-1" class="ui-label">标签</label>
    <span class="ui-checkbox"><input type="checkbox" id="item4-1" name="item4-1" class="ui-checkbox-normal" disabled=""><label for="item4-1" class="ui-checkbox-simulation"></label></span>
    <label for="item4-1" class="ui-label f-not-allowed">标签</label>
    <span class="ui-checkbox"><input type="checkbox" id="item5-1" name="item5-1" class="ui-checkbox-normal" disabled="" checked=""><label for="item5-1" class="ui-checkbox-simulation"></label></span>
    <label for="item5-1" class="ui-label f-not-allowed">标签</label>

    <!-- ------------------------------- 华丽无双的分割线 ------------------------------- -->
    <br><br>
    <h4 class="demoHeaders">Switch</h4>
    <label class="ui-switch">
        <input type="checkbox" checked>
        <span class="ui-switch-btn"></span>
    </label>

    &nbsp;

    <label class="ui-switch ui-switch-blue">
        <input type="checkbox" checked>
        <span class="ui-switch-btn"></span>
    </label>

    &nbsp;

    <label class="ui-switch ui-switch-green">
        <input type="checkbox" checked>
        <span class="ui-switch-btn"></span>
    </label>

    &nbsp;

    <label class="ui-switch ui-switch-orange">
        <input type="checkbox" checked>
        <span class="ui-switch-btn"></span>
    </label>

    &nbsp;

    <label class="ui-switch ui-switch-violet">
        <input type="checkbox" checked>
        <span class="ui-switch-btn"></span>
    </label>

    <!-- ------------------------------- 华丽无双的分割线 ------------------------------- -->
    <br><br>
    <h4 class="demoHeaders">Datepicker</h4>
    <input type="text" id="J-datepicker-a" value="" /> - <input type="text" id="J-datepicker-b" value="" />

    <!-- ------------------------------- 华丽无双的分割线 ------------------------------- -->
    <br><br>
    <h4 class="demoHeaders">Slider</h4>
    <div id="J-slider"></div>

    <!-- ------------------------------- 华丽无双的分割线 ------------------------------- -->
    <br><br>
    <h4 class="demoHeaders">Tooltips</h4>
    <p style="padding: 10px; line-height: 22px;">
        浮层提示，浮层进场的时候在浮层的父级增加 .z-ui-tooltips-in 类<br>
        浮层退场的时候在浮层的父级增加 .z-ui-tooltips-out 类，然后150毫秒后删除 .z-ui-tooltips-in 和 .z-ui-tooltips-out 两个类。<br>
        老规矩，兼容到 IE7，IE6 部分兼容（已经放弃它了）<br><br>
        箭头有12种方向，分别在父元素增加以下类别：<br>
        <table class="table">
            <tr>
                <td>.ui-tooltips-top-arrow（上中）</td>
                <td>.ui-tooltips-top-left-arrow（上左）</td>
            </tr>
            <tr>
                <td>.ui-tooltips-top-right-arrow（上右）</td>
                <td>.ui-tooltips-right-arrow（右中）</td>
            </tr>
            <tr>
                <td>.ui-tooltips-right-top-arrow（右上）</td>
                <td>.ui-tooltips-right-bottom-arrow（右下）</td>
            </tr>
            <tr>
                <td>.ui-tooltips-bottom-arrow（下中）</td>
                <td>.ui-tooltips-bottom-left-arrow（下左）</td>
            </tr>
            <tr>
                <td>.ui-tooltips-bottom-right-arrow（下右）</td>
                <td>.ui-tooltips-left-arrow（左中）</td>
            </tr>
            <tr>
                <td>.ui-tooltips-left-top-arrow（左上）</td>
                <td>.ui-tooltips-left-bottom-arrow（左下）</td>
            </tr>
        </table>
    </p>
    <br><br>

    <div class="tooltips-demo">
        <div class="ui-tooltips ui-tooltips-top-left-arrow z-ui-tooltips-in demo-1">
            <div class="ui-tooltips-arrow">
                <i class="arrow arrow-out">&#9670;</i>
                <i class="arrow">&#9670;</i>
            </div>
            <div class="ui-tooltips-content">
                <p class="ui-tooltips-msg"><i class="ui-icon ui-icon-info"></i>华丽酷炫叼炸天</p>
            </div>
        </div>

        <div class="ui-tooltips ui-tooltips-bottom-right-arrow z-ui-tooltips-in demo-2">
            <div class="ui-tooltips-arrow">
                <i class="arrow arrow-out">&#9670;</i>
                <i class="arrow">&#9670;</i>
            </div>
            <div class="ui-tooltips-content">
                <p class="ui-tooltips-msg"><i class="ui-icon ui-icon-alert"></i>高端大气上档次</p>
            </div>
        </div>

        <div class="ui-tooltips ui-tooltips-handle ui-tooltips-top-left-arrow z-ui-tooltips-in demo-3">
            <div class="ui-tooltips-arrow">
                <i class="arrow arrow-out">&#9670;</i>
                <i class="arrow">&#9670;</i>
            </div>
            <a href="javascript:;" role="button" class="ui-tooltips-close ui-icon ui-icon-closethick"></a>
            <div class="ui-tooltips-content">
                <p>确定扁小童一顿吗？</p>
                <p class="ui-tooltips-command"><a href="javascript:;" role="button" class="ui-btn-mini ui-btn-primary">确定</a><a href="javascript:;" role="button" class="ui-btn-mini ui-btn-default">取消</a></p>
            </div>
        </div>

        <div class="ui-tooltips ui-tooltips-handle ui-tooltips-bottom-right-arrow z-ui-tooltips-in demo-4">
            <div class="ui-tooltips-arrow">
                <i class="arrow arrow-out">&#9670;</i>
                <i class="arrow">&#9670;</i>
            </div>
            <a href="javascript:;" role="button" class="ui-tooltips-close ui-icon ui-icon-closethick"></a>
            <div class="ui-tooltips-content">
                <p>确定要再扁小童一顿？</p>
                <p class="ui-tooltips-command"><a href="javascript:;" role="button" class="ui-btn-mini ui-btn-primary">确定</a><a href="javascript:;" role="button" class="ui-btn-mini ui-btn-default">取消</a></p>
            </div>
        </div>

        <div class="ui-tooltips ui-tooltips-info ui-tooltips-bottom-right-arrow z-ui-tooltips-in demo-5">
            <div class="ui-tooltips-arrow">
                <i class="arrow arrow-out">&#9670;</i>
                <i class="arrow">&#9670;</i>
            </div>
            <div class="ui-tooltips-content">
                <p>.ui-tooltips-info （蓝色）</p>
            </div>
        </div>

        <div class="ui-tooltips ui-tooltips-warning ui-tooltips-bottom-right-arrow z-ui-tooltips-in demo-6">
            <div class="ui-tooltips-arrow">
                <i class="arrow arrow-out">&#9670;</i>
                <i class="arrow">&#9670;</i>
            </div>
            <div class="ui-tooltips-content">
                <p>.ui-tooltips-warning （橙黄色）</p>
            </div>
        </div>

        <div class="ui-tooltips ui-tooltips-success ui-tooltips-bottom-right-arrow z-ui-tooltips-in demo-7">
            <div class="ui-tooltips-arrow">
                <i class="arrow arrow-out">&#9670;</i>
                <i class="arrow">&#9670;</i>
            </div>
            <div class="ui-tooltips-content">
                <p>.ui-tooltips-success （绿色）</p>
            </div>
        </div>

        <div class="ui-tooltips ui-tooltips-error ui-tooltips-bottom-right-arrow z-ui-tooltips-in demo-8">
            <div class="ui-tooltips-arrow">
                <i class="arrow arrow-out">&#9670;</i>
                <i class="arrow">&#9670;</i>
            </div>
            <div class="ui-tooltips-content">
                <p>.ui-tooltips-error （红色）</p>
            </div>
        </div>
    </div>

    <!-- ------------------------------- 华丽无双的分割线 ------------------------------- -->
    <br><br>
    <h4 class="demoHeaders">Progress</h4>
    .ui-progress-striped 类为进度条添加斜纹<br>
    .ui-progress-active 类为进度条斜纹添加动画<br><br>
    <div class="ui-progress ui-progress-striped ui-progress-active">
        <div style="width: 65%;" class="bar"></div>
    </div>

    <br>

    <div class="ui-progress ui-progress-striped ui-progress-active">
        <div style="width: 65%;" class="bar bar-warning"></div>
    </div>

    <br>

    <div class="my-progress ui-progress ui-progress-striped ui-progress-active">
        <div style="width: 65%;" class="bar bar-error"></div>
    </div>

    <br>

    <div class="my-progress ui-progress ui-progress-striped ui-progress-active">
        <div style="width: 65%;" class="bar bar-success"></div>
    </div>


    <script type="text/javascript">
    $.datepicker.setDefaults({
        dateFormat : 'yy-mm-dd',
        dayNames : ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
        dayNamesMin : ['日', '一', '二', '三', '四', '五', '六'],
        monthNames : ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
        monthNamesShort : ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一', '十二'],
        showMonthAfterYear : true,
        showButtonPanel : true,
        currentText : '今天',
        closeText : '关闭',
        showOtherMonths : true
    });

    $('#J-datepicker-a').datepicker({
        inline : true,
        dateFormat : 'yy-mm-dd',
        //minDate : -365, //数字，代表日期可选范围是当前日期的前后（-+）多少天
        //maxDate : +365, //数字，代表日期可选范围是当前日期的前后（-+）多少天
        numberOfMonths: [1, 1], //数组第一个元素表示行，第二个元素表示列
        changeMonth : false, //是否显示月份切换下拉框
        changeYear : false, //是否显示年份切换下拉框
        showButtonPanel : true, //是否显示最下方的按钮
        beforeShow : function () {}, //日历控件显示之前的回调
        onSelect : function () {
            $('#J-datepicker-b').datepicker('option', {
                minDate : arguments[0]
            });
        }, //选择了某个日期之后的回调
        onClose : function () {} //日历控件关闭时的回调
    });

    $('#J-datepicker-b').datepicker({
        inline : true,
        dateFormat : 'yy-mm-dd',
        //minDate : -365, //数字，代表日期可选范围是当前日期的前后（-+）多少天
        //maxDate : +365, //数字，代表日期可选范围是当前日期的前后（-+）多少天
        numberOfMonths: [1, 1], //数组第一个元素表示行，第二个元素表示列
        changeMonth : false, //是否显示月份切换下拉框
        changeYear : false, //是否显示年份切换下拉框
        showButtonPanel : true, //是否显示最下方的按钮
        beforeShow : function () {}, //日历控件显示之前的回调
        onSelect : function () {
            $('#J-datepicker-a').datepicker('option', {
                maxDate : arguments[0]
            });
        }, //选择了某个日期之后的回调
        onClose : function () {} //日历控件关闭时的回调
    });

    $('#J-selectmenu-a').selectmenu({
        change : function (event, ui) {
            //下拉框的值发生变化时的回调
            console.info($(this).val())
        },
        open : function (event) {
            //展开下拉选项时的回调
        },
        close : function (event) {
            //收起下拉选项时的回调
        },
        create : function (event, ui) {
            //模拟下拉框创建后的回调
        },
        focus : function (event, ui) {
            //下拉框获得焦点时的回调
        },
        select : function (event, ui) {
            //选择一个下拉选项时的回调（假如选的是当前值，则只触发 select 回调，不会触发 change 回调）
        }
    });
    //利用脚本修改下拉框的值后，利用refresh方法可以刷新模拟下拉框
    //$( "#J-selectmenu" ).val('Slow')
    //$( "#J-selectmenu" ).selectmenu('refresh')

    $('#J-slider').slider({
        range: true,
        values: [ 17, 67 ]
    });

    $('#J-selectmenu-b').selectmenu();

    $('#J-selectmenu-c')
        .selectmenu()
        .selectmenu('widget')
        .addClass('ui-selectmenu-button-large');

    $('#J-selectmenu-d')
        .selectmenu()
        .selectmenu('widget')
        .addClass('ui-selectmenu-button-small');
    </script>


    <div style="height: 50px"></div>
    <h4 class="demoHeaders">UI框架自带的小图标(图片图标，尺寸不可变，用处不大)</h4>
    <ul id="icons" class="ui-widget ui-helper-clearfix">
        <li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-n"><span class="ui-icon ui-icon-carat-1-n"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-ne"><span class="ui-icon ui-icon-carat-1-ne"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-e"><span class="ui-icon ui-icon-carat-1-e"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-se"><span class="ui-icon ui-icon-carat-1-se"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-s"><span class="ui-icon ui-icon-carat-1-s"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-sw"><span class="ui-icon ui-icon-carat-1-sw"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-w"><span class="ui-icon ui-icon-carat-1-w"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-nw"><span class="ui-icon ui-icon-carat-1-nw"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-carat-2-n-s"><span class="ui-icon ui-icon-carat-2-n-s"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-carat-2-e-w"><span class="ui-icon ui-icon-carat-2-e-w"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-n"><span class="ui-icon ui-icon-triangle-1-n"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-ne"><span class="ui-icon ui-icon-triangle-1-ne"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-e"><span class="ui-icon ui-icon-triangle-1-e"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-se"><span class="ui-icon ui-icon-triangle-1-se"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-s"><span class="ui-icon ui-icon-triangle-1-s"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-sw"><span class="ui-icon ui-icon-triangle-1-sw"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-w"><span class="ui-icon ui-icon-triangle-1-w"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-nw"><span class="ui-icon ui-icon-triangle-1-nw"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-2-n-s"><span class="ui-icon ui-icon-triangle-2-n-s"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-2-e-w"><span class="ui-icon ui-icon-triangle-2-e-w"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-n"><span class="ui-icon ui-icon-arrow-1-n"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-ne"><span class="ui-icon ui-icon-arrow-1-ne"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-e"><span class="ui-icon ui-icon-arrow-1-e"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-se"><span class="ui-icon ui-icon-arrow-1-se"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-s"><span class="ui-icon ui-icon-arrow-1-s"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-sw"><span class="ui-icon ui-icon-arrow-1-sw"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-w"><span class="ui-icon ui-icon-arrow-1-w"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-nw"><span class="ui-icon ui-icon-arrow-1-nw"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-n-s"><span class="ui-icon ui-icon-arrow-2-n-s"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-ne-sw"><span class="ui-icon ui-icon-arrow-2-ne-sw"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-e-w"><span class="ui-icon ui-icon-arrow-2-e-w"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-se-nw"><span class="ui-icon ui-icon-arrow-2-se-nw"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-n"><span class="ui-icon ui-icon-arrowstop-1-n"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-e"><span class="ui-icon ui-icon-arrowstop-1-e"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-s"><span class="ui-icon ui-icon-arrowstop-1-s"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-w"><span class="ui-icon ui-icon-arrowstop-1-w"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-n"><span class="ui-icon ui-icon-arrowthick-1-n"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-ne"><span class="ui-icon ui-icon-arrowthick-1-ne"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-e"><span class="ui-icon ui-icon-arrowthick-1-e"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-se"><span class="ui-icon ui-icon-arrowthick-1-se"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-s"><span class="ui-icon ui-icon-arrowthick-1-s"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-sw"><span class="ui-icon ui-icon-arrowthick-1-sw"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-w"><span class="ui-icon ui-icon-arrowthick-1-w"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-nw"><span class="ui-icon ui-icon-arrowthick-1-nw"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-n-s"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-ne-sw"><span class="ui-icon ui-icon-arrowthick-2-ne-sw"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-e-w"><span class="ui-icon ui-icon-arrowthick-2-e-w"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-se-nw"><span class="ui-icon ui-icon-arrowthick-2-se-nw"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-n"><span class="ui-icon ui-icon-arrowthickstop-1-n"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-e"><span class="ui-icon ui-icon-arrowthickstop-1-e"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-s"><span class="ui-icon ui-icon-arrowthickstop-1-s"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-w"><span class="ui-icon ui-icon-arrowthickstop-1-w"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-w"><span class="ui-icon ui-icon-arrowreturnthick-1-w"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-n"><span class="ui-icon ui-icon-arrowreturnthick-1-n"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-e"><span class="ui-icon ui-icon-arrowreturnthick-1-e"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-s"><span class="ui-icon ui-icon-arrowreturnthick-1-s"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-w"><span class="ui-icon ui-icon-arrowreturn-1-w"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-n"><span class="ui-icon ui-icon-arrowreturn-1-n"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-e"><span class="ui-icon ui-icon-arrowreturn-1-e"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-s"><span class="ui-icon ui-icon-arrowreturn-1-s"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-w"><span class="ui-icon ui-icon-arrowrefresh-1-w"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-n"><span class="ui-icon ui-icon-arrowrefresh-1-n"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-e"><span class="ui-icon ui-icon-arrowrefresh-1-e"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-s"><span class="ui-icon ui-icon-arrowrefresh-1-s"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-4"><span class="ui-icon ui-icon-arrow-4"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-4-diag"><span class="ui-icon ui-icon-arrow-4-diag"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-extlink"><span class="ui-icon ui-icon-extlink"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-newwin"><span class="ui-icon ui-icon-newwin"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-refresh"><span class="ui-icon ui-icon-refresh"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-shuffle"><span class="ui-icon ui-icon-shuffle"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-transfer-e-w"><span class="ui-icon ui-icon-transfer-e-w"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-transferthick-e-w"><span class="ui-icon ui-icon-transferthick-e-w"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-folder-collapsed"><span class="ui-icon ui-icon-folder-collapsed"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-folder-open"><span class="ui-icon ui-icon-folder-open"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-document"><span class="ui-icon ui-icon-document"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-document-b"><span class="ui-icon ui-icon-document-b"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-note"><span class="ui-icon ui-icon-note"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-mail-closed"><span class="ui-icon ui-icon-mail-closed"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-mail-open"><span class="ui-icon ui-icon-mail-open"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-suitcase"><span class="ui-icon ui-icon-suitcase"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-comment"><span class="ui-icon ui-icon-comment"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-person"><span class="ui-icon ui-icon-person"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-print"><span class="ui-icon ui-icon-print"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-trash"><span class="ui-icon ui-icon-trash"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-locked"><span class="ui-icon ui-icon-locked"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-unlocked"><span class="ui-icon ui-icon-unlocked"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-bookmark"><span class="ui-icon ui-icon-bookmark"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-tag"><span class="ui-icon ui-icon-tag"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-home"><span class="ui-icon ui-icon-home"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-flag"><span class="ui-icon ui-icon-flag"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-calculator"><span class="ui-icon ui-icon-calculator"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-cart"><span class="ui-icon ui-icon-cart"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-pencil"><span class="ui-icon ui-icon-pencil"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-clock"><span class="ui-icon ui-icon-clock"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-disk"><span class="ui-icon ui-icon-disk"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-calendar"><span class="ui-icon ui-icon-calendar"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-zoomin"><span class="ui-icon ui-icon-zoomin"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-zoomout"><span class="ui-icon ui-icon-zoomout"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-search"><span class="ui-icon ui-icon-search"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-wrench"><span class="ui-icon ui-icon-wrench"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-gear"><span class="ui-icon ui-icon-gear"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-heart"><span class="ui-icon ui-icon-heart"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-star"><span class="ui-icon ui-icon-star"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-link"><span class="ui-icon ui-icon-link"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-cancel"><span class="ui-icon ui-icon-cancel"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-plus"><span class="ui-icon ui-icon-plus"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-plusthick"><span class="ui-icon ui-icon-plusthick"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-minus"><span class="ui-icon ui-icon-minus"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-minusthick"><span class="ui-icon ui-icon-minusthick"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-close"><span class="ui-icon ui-icon-close"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-closethick"><span class="ui-icon ui-icon-closethick"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-key"><span class="ui-icon ui-icon-key"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-lightbulb"><span class="ui-icon ui-icon-lightbulb"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-scissors"><span class="ui-icon ui-icon-scissors"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-clipboard"><span class="ui-icon ui-icon-clipboard"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-copy"><span class="ui-icon ui-icon-copy"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-contact"><span class="ui-icon ui-icon-contact"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-image"><span class="ui-icon ui-icon-image"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-video"><span class="ui-icon ui-icon-video"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-script"><span class="ui-icon ui-icon-script"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-alert"><span class="ui-icon ui-icon-alert"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-info"><span class="ui-icon ui-icon-info"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-notice"><span class="ui-icon ui-icon-notice"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-help"><span class="ui-icon ui-icon-help"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-check"><span class="ui-icon ui-icon-check"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-bullet"><span class="ui-icon ui-icon-bullet"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-radio-off"><span class="ui-icon ui-icon-radio-off"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-radio-on"><span class="ui-icon ui-icon-radio-on"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-pin-w"><span class="ui-icon ui-icon-pin-w"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-pin-s"><span class="ui-icon ui-icon-pin-s"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-play"><span class="ui-icon ui-icon-play"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-pause"><span class="ui-icon ui-icon-pause"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-seek-next"><span class="ui-icon ui-icon-seek-next"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-seek-prev"><span class="ui-icon ui-icon-seek-prev"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-seek-end"><span class="ui-icon ui-icon-seek-end"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-seek-first"><span class="ui-icon ui-icon-seek-first"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-stop"><span class="ui-icon ui-icon-stop"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-eject"><span class="ui-icon ui-icon-eject"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-volume-off"><span class="ui-icon ui-icon-volume-off"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-volume-on"><span class="ui-icon ui-icon-volume-on"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-power"><span class="ui-icon ui-icon-power"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-signal-diag"><span class="ui-icon ui-icon-signal-diag"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-signal"><span class="ui-icon ui-icon-signal"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-battery-0"><span class="ui-icon ui-icon-battery-0"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-battery-1"><span class="ui-icon ui-icon-battery-1"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-battery-2"><span class="ui-icon ui-icon-battery-2"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-battery-3"><span class="ui-icon ui-icon-battery-3"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-plus"><span class="ui-icon ui-icon-circle-plus"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-minus"><span class="ui-icon ui-icon-circle-minus"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-close"><span class="ui-icon ui-icon-circle-close"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-e"><span class="ui-icon ui-icon-circle-triangle-e"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-s"><span class="ui-icon ui-icon-circle-triangle-s"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-w"><span class="ui-icon ui-icon-circle-triangle-w"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-n"><span class="ui-icon ui-icon-circle-triangle-n"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-e"><span class="ui-icon ui-icon-circle-arrow-e"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-s"><span class="ui-icon ui-icon-circle-arrow-s"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-w"><span class="ui-icon ui-icon-circle-arrow-w"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-n"><span class="ui-icon ui-icon-circle-arrow-n"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-zoomin"><span class="ui-icon ui-icon-circle-zoomin"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-zoomout"><span class="ui-icon ui-icon-circle-zoomout"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-check"><span class="ui-icon ui-icon-circle-check"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-circlesmall-plus"><span class="ui-icon ui-icon-circlesmall-plus"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-circlesmall-minus"><span class="ui-icon ui-icon-circlesmall-minus"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-circlesmall-close"><span class="ui-icon ui-icon-circlesmall-close"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-squaresmall-plus"><span class="ui-icon ui-icon-squaresmall-plus"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-squaresmall-minus"><span class="ui-icon ui-icon-squaresmall-minus"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-squaresmall-close"><span class="ui-icon ui-icon-squaresmall-close"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-grip-dotted-vertical"><span class="ui-icon ui-icon-grip-dotted-vertical"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-grip-dotted-horizontal"><span class="ui-icon ui-icon-grip-dotted-horizontal"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-grip-solid-vertical"><span class="ui-icon ui-icon-grip-solid-vertical"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-grip-solid-horizontal"><span class="ui-icon ui-icon-grip-solid-horizontal"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-gripsmall-diagonal-se"><span class="ui-icon ui-icon-gripsmall-diagonal-se"></span></li>
        <li class="ui-state-default ui-corner-all" title=".ui-icon-grip-diagonal-se"><span class="ui-icon ui-icon-grip-diagonal-se"></span></li>
    </ul>
</div>

</body>
</html>
